<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="companyInfo" :is-company="true" @addDepts="addDepts" />
        <hr>
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <template v-slot="scoped">
            <!-- 这里就是可以自定义每个节点显示的位置
          这里写的是模板, 只需要写一次, 外层 el-tree
          进行数组遍历, 每个节点都用这个模板渲染一次 -->
            <TreeTools :node-data="scoped.data" :is-company="false" @addDepts="addDepts" @reloadPage="getDepartments" @editDepts="editDepts" />
          </template>
        </el-tree>
      </el-card>
      <AddDepts ref="addDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @reloadPage="getDepartments" @closeDialog="isShowDialog = false" />
    </div>
  </div>
</template>

<script>
import AddDepts from './components/add-depts.vue'
import { listToTreeData } from '@/utils'
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
export default {
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    return {
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      departs: [
        // 数组每个对象都是一个节点,
        // element ui 要求树形 label 属性指定当前节点名称
        // children 属性指定子节点数组, 每层子节点数组结构相似
        // 如果后端数据字段名不一样, 就要在el-tree组件中定义 props 指定对应字段名
        // { name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
        // { name: '行政部', manager: '刘备' },
        // { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      isShowDialog: false,
      nodeData: {}
    }
  },
  created() {
    this.getDepartments() // 调用自身的方法
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      // this.companyInfo = { name: result.companyName, manager: '负责人' }
      this.departs = listToTreeData(result.depts, '') // 需要将其转化成树形结构
      console.log(result)
    },
    addDepts(nodeData) {
      this.isShowDialog = true
      this.nodeData = nodeData
    },
    async editDepts(nodeData) {
      console.log(nodeData)
      // 还需要通知弹窗回显数据
      // 父组件调用子组件的函数,只需要触发 ref 获取组件实例即可
      // 为了避免闪烁, 应该等待这个异步数据获取完毕再弹窗
      // 所有被 async await 标记的异步函数, 都是 promise
      // 都可以再次 await
      await this.$refs.addDepts.getDeptsDetail(nodeData)
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
